<template>
    <div class="page">
        <div class="back_img">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/o_1c498ll2n16li1buoa05r14o0l1k.gif" alt="">
        </div>
        <!--walk-->
        <div id="walk" ref="walk">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/ASDASDASDVFC.gif" alt="">
        </div>
        <!--bottom-->
        <div id="bottom" ref="bottom">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/16a3010d7724c899cbf3541e0ff26cf8.gif" alt="">
        </div>
    </div>
</template>
<style lang="less" scoped>
    .page {
        width: 100%;
        height: 100%;
    }
    img {
        width: 100%;
        height: 100%;
    }

    .back_img {
        width: 100%;
        height: 100%;

    }

    #walk {
        position: absolute;
        top: px2rem(100);
        left: px2rem(250);
        width: px2rem(250);
        height: px2rem(400);
    }

    #bottom {
        position: absolute;
        width: px2rem(700);
        height: px2rem(400);
        bottom: px2rem(100);
        left: px2rem(30);
        background: #eee;
        img {
            width: 100%;
            height: 100%;
        }
    }


</style>
<script>

    import {left2right, up2down} from "../utils/animation";

    export default {
        props: {
            isShow: {
                type: Boolean,

            }
        },
        watch: {
            isShow() {
                this.init()
            }
        },
        mounted() {
        },
        methods: {
            init() {
                var self = this;
                up2down(this.isShow, this.$refs['walk'], 0)
                left2right(this.isShow, this.$refs['bottom'], 1)
            }
        },
        data(props) {
            return {}
        }
    }
</script>
